<template>
    <!-- isFlat -->
    <ScaleBox :width="1920" :height="1080" bgc="#0a1b20">

        <heads></heads>
        <div class="bottom">
            <div class="bottom-left">
                <div class="bottom-left-top">
                    <div class="title-box padding">
                        <div class="title-left">
                            <img src="../../assets/images/icon.svg" alt="">
                            <div class="left-title">风险区人员实时分布</div>
                        </div>
                    </div>
                    <!-- <BorderBox1 class="container"> Content </BorderBox1> -->
                    <div class="number-box">
                        <div class="number-text">
                            <div class="text">风险区人员总量</div>
                            <div class="number">{{ numObject.total }}</div>
                        </div>
                        <div class="number-text">
                            <div class="text">流动人口</div>
                            <div class="number">{{ numObject.flowTotal }}</div>
                        </div>
                        <div class="number-text">
                            <div class="text">常驻人口</div>
                            <div class="number">{{ numObject.residentTotal }}</div>
                        </div>
                        <div class="number-text">
                            <div class="text">风险区管理人员数量</div>
                            <div class="number">{{ numObject.riskManagerTotal }}</div>
                        </div>
                    </div>
                    <!--  -->
                    <baidu-map @ready="createMap" class="map-box" :center="{ lng: 103.79, lat: 31.27 }" :zoom="12">

                        <!-- 地图类型 -->
                        <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                            anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->

                        <!-- 放大 -->
                        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

                        <!-- 点 -->
                        <bm-marker :clicking="true" v-for="(item, index) in  drop" :key="index"
                            :position="{ lng: item.lng, lat: item.lat }" @click="hanldeDrop($event, item)"
                            animation="BMAP_ANIMATION_BOUNCE">
                            <bm-label :content="item.name" :labelStyle="{ color: 'red', fontSize: '16px' }"
                                :offset="{ width: 0, height: 30 }"></bm-label>
                        </bm-marker>

                        <!-- 连线 -->
                        <bm-polygon :clicking="false" v-for="(item, index) in  areaLineList" :key="index"
                            :path="item.innerLnglatList" :fillOpacity="0" stroke-color="blue" :stroke-opacity="0.5"
                            :stroke-weight="4" fillColor="" :editing="false" />

                        <bm-polygon :clicking="false" v-for="(item, index) in  areaLineList" :key="index"
                            :path="item.outerLnglatList" :fillOpacity="0" stroke-color="red" :stroke-opacity="1"
                            :stroke-weight="4" fillColor="" :editing="false" />
                    </baidu-map>
                </div>

                <div class="bottom-left-bottom">
                    <div class="bottom-l">
                        <div class="title-box">
                            <div class="title-left">
                                <img class="user-image" src="../../assets/images/user.svg" alt="">
                                <div>最后一次短信通知后滞留人员占比统计</div>
                            </div>
                        </div>
                        <div id="textMsg" style="width: 100%;height: 200px;"></div>
                    </div>
                    <div class="bottom-r">
                        <rollTable :isPerson="false" :data="tableData"></rollTable>
                    </div>
                </div>
            </div>
            <div class="bottom-right">
                <div class="bottom-right-top">
                    <div class="title-box">
                        <div class="title-left">
                            <img class="user-image" src="../../assets/images/user.svg" alt="">
                            <div>风险区人员流动趋势</div>
                        </div>
                        <el-select suffix-icon="CaretBottom" @change="hanldeSelect" size="large" v-model="trendValue"
                            value-key="id">
                            <el-option v-for="item in trendOpti" :key="item.id" :label="item.label" :value="item.id" />
                        </el-select>
                    </div>
                    <div id="foldLine" style="width: 100%;height: 300px;"></div>
                </div>

                <div class="bottom-right-center">
                    <div class="title-box">
                        <div class="title-left">
                            <img class="user-image" src="../../assets/images/user.svg" alt="">
                            <div>风险区人员实时来源分布占比</div>
                        </div>
                    </div>
                    <div id="pie" style="width: 100%;height: 250px;"></div>
                </div>

                <div class="bottom-right-bottom">
                    <div class="title-box">
                        <div class="title-left">
                            <img class="user-image" src="../../assets/images/user.svg" alt="">
                            <div>风险区人员实时分布</div>
                        </div>
                    </div>
                    <div class="personList-box">
                        <div v-for="(itme, index) in personList" :key="index" class="progress-row">
                            <div class="progress-title">{{ itme.number }} {{ itme.address }}</div>
                            <el-progress :percentage="Math.floor(itme.ratio * 100)" :color="customColors" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ScaleBox>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import ScaleBox from "vue3-scale-box";
import { useStore } from 'vuex'
const store = useStore()
import { useRouter } from "vue-router";
const router = useRouter();
import * as echarts from "echarts";
import { getStatistics, getFlowtrend, getDistribution, getPerson, getPercentage, getNotices, areaList } from '@/api/dashboard.js'
import rollTable from '@/components/rollTable/index.vue'
import heads from '@/components/head/index.vue'

// 跳转详情
const hanldeDrop = (e, item) => {
    router.push({ path: '/details', query: { code: item.area, lng: item.lng, lat: item.lat } });
}

// 默认混合地图
// const createMap = ({ BMap, map }) => {
//     map.setMapType(BMAP_HYBRID_MAP);
// }


// 风险区人员流动趋势下拉数据
const trendValue = ref(1)
const trendOpti = ref([
    { id: 1, label: '5分钟' },
    { id: 2, label: '30分钟' },
    { id: 3, label: '1小时' }
])

// 切换数据
const hanldeSelect = (e) => {
    hanldeFoldLine(e);
}

// 表格数据
const tableData = ref([])
const getData = () => {
    getNotices().then(res => {
        tableData.value = res.data;
    })
}

// 获取风险 区域
const areaLineList = ref([]);
const drop = ref([]);
areaList().then(res => {
    res.data.forEach(item => {
        let newArray = item.centerLnglat.split(',');
        drop.value.push({
            lng: newArray[0],
            lat: newArray[1],
            name: item.areaName,
            area: item.areaCode,
        })
    })

    areaLineList.value = res.data;
})


// 风险区人员流动趋势
let foldLine = null;
const hanldeFoldLine = (e = 1) => {
    getFlowtrend({
        type: e
    }).then(res => {
        if (foldLine == null) {
            foldLine = echarts.init(document.getElementById("foldLine"));
        }

        let num = [];
        let time = [];
        res.data.forEach(item => {
            num.push(item.personTotal);
            time.push(item.time);
        });

        foldLine.setOption({
            grid: {
                left: '0%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#000',
                textStyle: {
                    color: '#00e5aa',
                    fontSize: 16
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time,
                axisLabel: {
                    fontSize: 16,
                    color: '#ffffff',
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    color: '#ffffff',
                }
            },
            series: [
                {
                    data: num,
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {
                                offset: 0,
                                color: '#74c1bd'
                            }, {
                                offset: 1,
                                color: '#0bb8af'
                            }
                        ])
                    },
                    lineStyle: {
                        width: 1
                    }
                }
            ]
        });
    })
}

// 风险区人员实时来源分布占比
const hanldeDistribution = () => {
    getDistribution().then(res => {
        let pie = echarts.init(document.getElementById("pie"));
        let { local, outside, overseas } = res.data;
        let data = [
            { value: local, name: '本地' },
            { value: outside, name: '外地' },
            { value: overseas, name: '境外' },
        ]

        pie.setOption({
            tooltip: {
                trigger: 'item',
            },
            legend: {
                top: 'center',
                left: 'left',
                orient: 'vertical',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '85%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderWidth: 6,
                        borderColor: '#1c3e51',
                        color: function (colors) {
                            var colorList = [
                                '#0bb8af',
                                '#B5DBE8',
                                '#D45F36',
                            ];
                            return colorList[colors.dataIndex];
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        scaleSize: 10,
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold',

                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        });
    })
}

// 风险区人员实时人数分布
let personList = ref([]);
getPerson().then(res => {
    personList.value = res.data
})

// 最后一次短信通知后滞留人島占比統汁
const textMsgFun = () => {
    getPercentage().then(res => {
        let textMsg = echarts.init(document.getElementById("textMsg"));
        textMsg.setOption({
            tooltip: {
                trigger: 'item',
            },
            legend: {
                top: 'center',
                left: 'left',
                orient: 'vertical',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '85%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderWidth: 6,
                        borderColor: '#1c3e51',
                        color: function (colors) {
                            var colorList = [
                                '#0bb8af',
                                '#D45F36',
                            ];
                            return colorList[colors.dataIndex];
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        scaleSize: 10,
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold',

                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: Math.floor(res.data * 100), name: '无预警' },
                        { value: Math.floor((1 - res.data) * 100), name: '有预警' },
                    ]
                }
            ]
        });
    })
}


onMounted(() => {
    // 折线图
    hanldeFoldLine();

    // 风险区人员实时来源分布占比
    hanldeDistribution();

    // 最后一次短信通知
    textMsgFun();

    // 短信列表
    getData();
})

// 获取风险区域人员统计
let numObject = ref({})
getStatistics().then(res => {
    let data = res.data;
    numObject.value = data;
})

// 进度条颜色
const customColors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]

</script>

<style scoped>
.map-box {
    width: 100%;
    height: 465px;
}

.personList-box {
    height: 180px;
    overflow-y: scroll;
}

.bottom {
    display: flex;
    padding: 16px 36px;
    background: url('../../assets/images/data-bg.jpeg') no-repeat;
    background-size: 100% 100%;
}

.bottom-left {
    width: 1320px;
    box-sizing: border-box;
    margin-right: 30px;
}

.bottom-right {
    width: 600px;
    box-sizing: border-box;
}

.bottom-right-top {
    background: url('../../assets/images/r1.png') no-repeat;
    background-size: 100% 100%;
    height: 368px;
    padding: 16px;
    box-sizing: border-box;
}

.bottom-right-center {
    background: url('../../assets/images/r2.png') no-repeat;
    background-size: 100% 100%;
    height: 300px;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 16px;
}

.bottom-right-bottom {
    background: url('../../assets/images/r3.png') no-repeat;
    background-size: 100% 100%;
    height: 248px;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 16px;
}


.user-image {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-right: 8px;
}

.padding {
    padding: 16px;
    box-sizing: border-box;
}

.title-box {
    display: flex;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    color: white;
}

.title-left {
    display: flex;
    align-items: center;
}

.bottom-l {
    background: url('../../assets/images/l1.png') no-repeat;
    background-size: 100% 100%;
    width: 600px;
    height: 248px;
    padding: 16px;
    box-sizing: border-box;
}

.bottom-left-top {
    height: 685px;
    background: url('../../assets/images/warning.png') no-repeat;
    background-size: 100% 70px;
    box-sizing: border-box;
}

.left-title {
    font-size: 24px;
    color: #0bb8af;
    margin-left: 8px;
    font-weight: bold;
}

.number-box {
    display: flex;
    margin-top: 30px;
}

.number-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    flex: 1;
}

.number {
    font-size: 50px;
    font-weight: bold;
}

.text {
    font-size: 20px;
}

:deep .el-input__wrapper {
    background: #0f2233 !important;
    border: 2px solid #0bb8af;
    box-shadow: none;
    border-radius: 0;
    width: 150px;
}

:deep .el-input__inner {
    color: white !important;
    font-size: 16px;
}

.bottom-left-bottom {
    display: flex;
    margin-top: 16px;
}

.bottom-r {
    width: 610px;
    height: 248px;
    margin-left: 32px;
}

.progress-row {
    margin-top: 15px;
    color: white;
}

.progress-title {
    margin-bottom: 5px;
}

:deep .el-progress__text {
    color: white !important;
}
</style>